<script lang="ts" setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Api } from "@/apis";
import { SearchDetailDataType, AuthorDetail } from "@/typing";
import { authorStoriesStore } from "@/store";
import { booksImageArr } from "@/utils/imgSrcArr";

const router = useRouter()
const store = authorStoriesStore();
const {  updateAuthorData } = store;

const isSearch = ref<boolean>(false);
const isLoading = ref<boolean>(true);
const searchVal = ref('');
const category = ref('0');

let discImageIndex = ref<number>(0);
let searchList = ref<Array<SearchDetailDataType>>();
let authorList = ref<Array<AuthorDetail>>();

let discTimer = 0;
let keyword = '';

// 是否加载
if (isLoading.value) {
    discTimer = setInterval(() => {
        discImageIndex.value = (discImageIndex.value + 1) % booksImageArr.length;
    }, 80);
}
else {
    if (discTimer) {
        // 清除副作用计时器
        clearInterval(discTimer);
    }
}

setTimeout(() => {
    isLoading.value = false;
}, 1500);

// 搜索关键字
function onSearch() {
    if (searchVal.value) {
        keyword = searchVal.value;
        isSearch.value = true;
        render(keyword, 0);

        isLoading.value = true;
        setTimeout(() => {
            isLoading.value = false;
        }, 1500);
    }
}

// 关闭
function onCancel() {
    isSearch.value = false;
    router.go(-1);
}

// 改变搜索分类
function changIndex(num: string) {
    category.value = num;
    isLoading.value = true;

    if (num !== '6') {
        render(keyword, Number(num));
        authorList.value = [];
    }
    else {
        getAuthor();
        searchList.value = [];
    }

    setTimeout(() => {
        isLoading.value = false;
    }, 1500);
}

// 获取热门作者
async function getAuthor() {
    const data = await Api.getHotAuthorList();
    authorList.value = data.data.data;
}

// 获取搜索列表
async function render(text: string, num: number) {
    const data = await Api.getSearchDetail(category.value, text, num);
    if (data?.data.data) {
        searchList.value = data?.data.data.list;
    }
}

function goToDiscoverSearch(id: number) {
    router.push({
        name: 'discover-select',
        query: { id }
    })
}

function goToAuthorDetail(list: AuthorDetail) {
    updateAuthorData(list);
    let id = list.user_id;
    router.push({ name: 'author-detail', query: { id } })
}

</script>

<template>
    <div class="h-screen">
        <div v-show="isLoading">
            <div class=" disc-icon h-32 w-36 absolute top-64 left-64"
                :style="{ backgroundImage: `url(${booksImageArr[discImageIndex]})` }">
            </div>
        </div>
        <form>
            <van-search v-model="searchVal" background="rgb(245,245,245)" show-action placeholder="在这里写下你想寻找的"
                @search="onSearch" @cancel="onCancel" />
        </form>

        <div v-show="!isSearch && !isLoading"
            class="flex flex-col items-center justify-between h-3/5 mt-48 text-gray-400">
            <div class="my-8" @click="goToDiscoverSearch(0)">图文</div>
            <div class="my-8" @click="goToDiscoverSearch(3)">问答</div>
            <div class="my-8" @click="goToDiscoverSearch(1)">阅读</div>
            <div class="my-8" @click="goToDiscoverSearch(5)">影视</div>
            <div class="my-8" @click="goToDiscoverSearch(4)">音乐</div>
            <div class="my-8" @click="goToDiscoverSearch(8)">电台</div>
        </div>

        <div v-show="isSearch">
            <div class="flex px-5 text-center text-gray-400">
                <div class="my-3 mx-3 px-2 py-3" :class="category === '0' ? 'search-active' : ''"
                    @click="changIndex('0')">图文</div>

                <div class="my-3 mx-3 px-2 py-3" :class="category === '1' ? 'search-active' : ''"
                    @click="changIndex('1')">阅读 </div>

                <div class="my-3 mx-3 px-2 py-3" :class="category === '4' ? 'search-active' : ''"
                    @click="changIndex('4')">音乐</div>

                <div class="my-3 mx-3 px-2 py-3" :class="category === '5' ? 'search-active' : ''"
                    @click="changIndex('5')">影视 </div>

                <div class="my-3 mx-3 px-2 py-3" :class="category === '8' ? 'search-active' : ''"
                    @click="changIndex('8')"> ONE电台</div>

                <div class="my-3 mx-3 px-2 py-3" :class="category === '6' ? 'search-active' : ''"
                    @click="changIndex('6')">作者
                    /
                    音乐人</div>
            </div>
            <img v-show="!isLoading && searchList && authorList?.length == 0 && searchList?.length == 0 || searchList?.length == undefined"
                class="w-80 ml-40 mt-52" src="@/assets/share/no_search_result.png" alt="img">

            <div
                v-show="searchList && authorList?.length || searchList?.length != 0 || searchList?.length == undefined">
                <div v-show="category !== '6'">
                    <div v-for="(l, i) in searchList" :key="i" class="flex p-8 border-b">
                        <img class="w-20 h-20 mr-5" :src="l.cover" alt="img">
                        <div class="w-10/12">
                            <div class="search-title text-2xl mb-3">{{ l.title }}</div>
                            <div class="text-gray-400">{{ l.subtitle }}</div>
                        </div>
                    </div>
                </div>
                <div v-show="category === '6'">
                    <div v-for="(l, i) in authorList" :key="i" class="flex p-8 border-b"
                        @click="goToAuthorDetail(l)">
                        <img class="w-20 h-20 mr-5 rounded-full" :src="l.web_url" alt="img" />
                        <div class="w-10/12">
                            <div class="search-title text-2xl mb-3">{{ l.user_name }}</div>
                            <div class="text-gray-400 search-title">{{ l.desc }}</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</template>

<style>
.van-search__content {
    background-color: white !important;
}

.search-active {
    border-bottom: 3px solid gray;
}

.search-title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
</style>